<template>
  <div>
    <div class="home_header">
      <div class="home_header_swiper_pc">
        <img src="/image/top.png" width="100%" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in img_pc" :key="index">
            <img :src="item" width="100%" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="home_header_swiper_yd">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in img_yd" :key="index">
            <img :src="item" width="100%" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="home_zhong">
      <div class="nome_zhong_pc">
        <img src="/image/didi_pc.png" width="100%" />
        <img src="/image/zhong_pc.png" width="100%" />
      </div>
      <div class="nome_zhong_yd">
        <img src="/image/didi.png" width="100%" />
        <img src="/image/zhong.png" width="100%" />
      </div>
    </div>
    <div class="home_body">
      <img src="/image/title1.png" width="100%" />
      <div class="home_body_items">
        <div class="home_body_item" v-for="(item,index) in goodsListOne" :key="index">
          <img :src="item.img" />
          <p>{{item.content}}</p>
          <p>{{item.title}}</p>
          <p>
            <b>￥{{item.price}}</b>
          </p>
          <p @click="addCart(item)">加入购物车</p>
        </div>
      </div>
      <img src="/image/title2.png" width="100%" />
      <div class="home_body_items">
        <div class="home_body_item" v-for="(item,index) in goodsListTwo" :key="index">
          <img :src="item.img" />
          <p>{{item.content}}</p>
          <p>{{item.title}}</p>
          <p>
            <b>￥{{item.price}}</b>
          </p>
          <p @click="addCart(item)">加入购物车</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img_pc: [
        "http://localhost:8080/image/swiper1.jpg",
        "http://localhost:8080/image/swiper2.jpg",
        "http://localhost:8080/image/swiper3.jpg",
        "http://localhost:8080/image/swiper4.jpg"
      ],
      img_yd: [
        "http://localhost:8080/image/swipe1.jpg",
        "http://localhost:8080/image/swipe2.jpg",
        "http://localhost:8080/image/swipe3.jpg",
        "http://localhost:8080/image/swipe4.jpg"
      ]
    };
  },
  computed: {
    goodsListOne() {
      return this.$store.state.goods_list_one;
    },
    goodsListTwo() {
      return this.$store.state.goods_list_two;
    }
  },
  mounted() {
    this.$store.dispatch("get_List");
  },
  methods: {
    addCart(item) {
      //加购物车
      this.$store.dispatch("add_Cart", item);
      this.$router.push("/cart");
    }
  }
};
</script>
<style scoped>
.home_header_swiper_pc {
  width: 100%;
  display: block;
}
.home_header_swiper_yd {
  width: 100%;
  display: none;
}
.home_zhong {
  width: 100%;
}
.nome_zhong_pc {
  width: 100%;
  display: block;
}
.nome_zhong_yd {
  width: 100%;
  display: none;
}
.home_body {
  width: 100%;
}
.home_body_items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.home_body_item {
  width: 20%;
  background-color: #fff;
  margin: 5px 20px;
}
.home_body_item img {
  width: 100%;
}
.home_body_item p {
  width: 90%;
  margin-left: 5%;
  background-color: #fff;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.home_body_item p b {
  color: #d31225;
}
.home_body_item p:nth-child(5) {
  width: 90%;
  margin-left: 5%;
  color: #d31225;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #d31225;
}
@media screen and (max-width: 768px) {
  .home_header_swiper_pc {
    width: 100%;
    display: none;
  }
  .home_header_swiper_yd {
    width: 100%;
    display: block;
  }
  .nome_zhong_pc {
    width: 100%;
    display: none;
  }
  .nome_zhong_yd {
    width: 100%;
    display: block;
  }
  .home_body_item {
    width: 45%;
    background-color: #fff;
    margin: 5px 0px;
    display: inline-flex;
    flex-wrap: wrap;
  }
}
</style>